<template>
<div class="card">
    <div class="card-title">
        <div class="circle"></div>
        <span>{{resultTitle}}</span>
    </div>
    <div class="content">
        <slot></slot>
    </div>
</div>
</template>

<script>
export default {
    props:['resultTitle']

}
</script>

<style lang="scss" scoped>
.card {
    .card-title {
        color: #ffffff;
        font-size: 16px;
        padding: 10px 20px;
        font-weight: bold;
        background-color: #e984ca;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        align-items: center;
        width: fit-content;

        &>* {
            flex: none;
        }

        .circle {
            margin: -3px 8px 0 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ffffff;
        }
    }

    .content {
        padding: 30px;
        border-radius: 0px 2px 2px 2px;
        border: solid 1px #e6e6e6;
    }
}
</style>
